<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--  Object.defineProperty()
        这个方法的作用是：给对象新增属性：或者设置对象原有的属性
        用法：Object.defineProperty(给哪个对象新增属性‘新增的这个属性名叫啥’，{给新增的属性设置相关的配置项key：value对})
        第三个参数是属性相关的配置项，配置项有哪些？每个配置项的作用是啥？
        value配置项：给属性指定值
        writable 配置项：设置该属性的值是否可以被修改。true表示可以修改，false表示不能修改
        getter方法 配置项：不需要手动调用，当读取属性值的时候，getter方法被自动调用
            *getter 方法的返回值很重要，这个返回值就代表这个属性它的值
        setter方法 配置项：不需要手动调用，当修改属性值的时候，setter方法被自动调用
            *setter 方法上是有一个参数的，这个参数可以接受传过来的值
        注意：当配置项当中有setter和getter的时候，value和writable配置项都不能存在
    -->
    <div id="app"></div>
    <script src="./js/vue.js"></script>
    <script>
        let phone = {}
        //临时变量
        let temp
        Object.defineProperty(phone, 'color', {
            // value: '灰色',
            // writable: true,
            // getter 方法配置项
            get: function () {
                console.log('get');
                return temp
            },
            // setter 方法配置项
            set: function (val) {
                console.log('set', val);
                temp = val
            }
        })
    </script>
</body>

</html>